<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }"
                            @click="selectSubmenu(index, subIndex, $event)">
                            <router-link v-if="menu.name === '监测报警' && submenu.name === '区域化展示'" to="/regional-display"
                                data-readdy="true" class="text-sm">{{ submenu.name }}</router-link>
                            <router-link v-else-if="submenu.link" :to="submenu.link" data-readdy="true"
                                class="text-sm">{{
                                    submenu.name }}</router-link>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>监测报警</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">区域化展示</span>
                </div>
                <!-- 区域筛选器 -->
                <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                    <div class="flex items-center justify-between">
                        <h2 class="font-bold text-lg text-gray-800">区域筛选</h2>
                        <div class="flex space-x-2">
                            <button @click="refreshData"
                                class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-sync-alt mr-1"></i> 刷新数据
                            </button>
                            <button @click="exportReport" :disabled="isExporting"
                                class="px-3 py-1 bg-blue-600 text-white rounded-full flex items-center text-sm !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
                                :class="{
                                    'hover:bg-blue-700': !isExporting,
                                    'bg-blue-400 cursor-not-allowed': isExporting
                                }">
                                <i v-if="isExporting" class="fas fa-spinner fa-spin mr-1"></i>
                                <i v-else class="fas fa-download mr-1"></i>
                                {{ isExporting ? `导出中 ${exportProgress}%` : '导出报告' }}
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-7 gap-3 mt-4">
                        <div v-for="(area, index) in areaOptions" :key="index" @click="selectArea(area.value)"
                            class="bg-gray-100 rounded-lg p-3 flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:shadow-md"
                            :class="{ 'ring-2 ring-blue-500 bg-blue-50': selectedArea === area.value }">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center mb-2"
                                :class="area.bgColor">
                                <i :class="area.icon + ' text-white'"></i>
                            </div>
                            <span class="text-sm font-medium text-center">{{ area.label }}</span>
                            <span v-if="area.alertCount > 0"
                                class="mt-1 text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600">{{ area.alertCount
                                }}个告警</span>
                        </div>
                    </div>
                </div>
                <!-- 区域地图总览 -->
                <div class="grid grid-cols-3 gap-6 mb-6">
                    <div class="bg-white rounded-lg shadow-sm col-span-2 overflow-hidden">
                        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                            <h2 class="font-bold text-gray-700">区域地图总览</h2>
                            <div class="flex space-x-2">
                                <button v-for="(view, idx) in mapViews" :key="idx"
                                    class="px-3 py-1 text-sm rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="selectedMapView === view.value ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 hover:bg-gray-200'"
                                    @click="changeMapView(view.value)">
                                    {{ view.label }}
                                </button>
                            </div>
                        </div>
                        <div class="relative px-4 pt-4 pb-0">
                            <div class="absolute top-6 right-6 z-10 bg-white bg-opacity-90 p-3 rounded-lg shadow-sm">
                                <h3 class="text-sm font-bold mb-2">图例说明</h3>
                                <div class="space-y-2">
                                    <div v-for="legend in currentLegends" :key="legend.type" class="flex items-center">
                                        <div class="w-4 h-4 rounded-full mr-2" :class="legend.color"></div>
                                        <span class="text-xs">{{ legend.label }} ({{ legend.count }})</span>
                                    </div>
                                </div>
                            </div>
                            <div id="areaMapChart" class="h-[36rem]" ref="areaMapChart"></div>
                        </div>
                    </div>
                    <!-- 区域告警情况统计 -->
                    <div class="bg-white rounded-lg shadow-sm">
                        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                            <h2 class="font-bold text-gray-700">告警情况统计</h2>
                            <div class="flex items-center text-sm relative">
                                <span class="text-gray-500 mr-2">时间范围:</span>
                                <button @click="showTimeRangeDropdown = !showTimeRangeDropdown"
                                    class="flex items-center space-x-1 bg-blue-50 text-blue-600 px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer">
                                    <span>{{ timeRange.label }}</span>
                                    <i class="fas fa-chevron-down text-xs"
                                        :class="{ 'transform rotate-180': showTimeRangeDropdown }"></i>
                                </button>
                                <!-- 时间范围下拉菜单 -->
                                <div v-if="showTimeRangeDropdown"
                                    class="absolute right-0 top-full mt-1 bg-white shadow-lg rounded-lg z-20 w-32 py-1">
                                    <div v-for="option in timeRangeOptions" :key="option.value"
                                        @click="selectTimeRange(option)"
                                        class="px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer">
                                        {{ option.label }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="mb-6">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-sm font-medium text-gray-700">告警级别分布</h3>
                                    <span class="text-xs text-gray-500">总计: {{ totalAlerts }}</span>
                                </div>
                                <div id="alertLevelChart" class="h-40" ref="alertLevelChart"></div>
                            </div>
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-sm font-medium text-gray-700">告警趋势</h3>
                                    <span class="text-xs text-blue-600 cursor-pointer"
                                        @click="openTrendDetails">查看详情</span>
                                </div>
                                <div id="alertTrendChart" class="h-40" ref="alertTrendChart"></div>
                            </div>
                            <div class="mt-4">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-sm font-medium text-gray-700">最新告警</h3>
                                    <span class="text-xs text-blue-600 cursor-pointer"
                                        @click="openAllAlerts">查看全部</span>
                                </div>
                                <div class="space-y-2 max-h-48 overflow-y-auto">
                                    <div v-for="(alert, index) in latestAlerts" :key="index"
                                        class="p-2 rounded-lg flex items-center cursor-pointer hover:bg-gray-50" :class="{
                                            'border-l-4 border-red-500': alert.level === 'critical',
                                            'border-l-4 border-orange-500': alert.level === 'warning',
                                            'border-l-4 border-yellow-500': alert.level === 'caution'
                                        }">
                                        <div class="w-2 h-2 rounded-full mr-2" :class="{
                                            'bg-red-500': alert.level === 'critical',
                                            'bg-orange-500': alert.level === 'warning',
                                            'bg-yellow-500': alert.level === 'caution'
                                        }"></div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-xs font-medium text-gray-900 truncate">{{ alert.title }}</p>
                                            <p class="text-xs text-gray-500">{{ alert.location }} · {{ alert.time }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 实时监测指标面板 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">实时监测指标</h2>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center space-x-1 text-sm">
                                <span class="w-3 h-3 rounded-full bg-green-500"></span>
                                <span class="text-gray-600">正常</span>
                            </div>
                            <div class="flex items-center space-x-1 text-sm">
                                <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                                <span class="text-gray-600">预警</span>
                            </div>
                            <div class="flex items-center space-x-1 text-sm">
                                <span class="w-3 h-3 rounded-full bg-red-500"></span>
                                <span class="text-gray-600">告警</span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-4 gap-4">
                        <div v-for="(indicator, index) in realTimeIndicators" :key="index"
                            class="bg-white rounded-lg shadow-sm p-4"
                            :class="{
                                'border-l-4 border-red-500': indicator.status === 'alert',
                                'border-l-4 border-yellow-500': indicator.status === 'warning',
                                'border-l-4 border-green-500': indicator.status === 'normal'
                            }">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-sm font-medium text-gray-700">{{ indicator.name }}</h3>
                                <span class="text-xs px-2 py-0.5 rounded-full" :class="{
                                    'bg-red-100 text-red-600': indicator.status === 'alert',
                                    'bg-yellow-100 text-yellow-600': indicator.status === 'warning',
                                    'bg-green-100 text-green-600': indicator.status === 'normal'
                                }">
                                    {{ indicator.statusText }}
                                </span>
                            </div>
                            <div class="flex items-end space-x-1">
                                <span class="text-2xl font-bold" :class="{
                                    'text-red-600': indicator.status === 'alert',
                                    'text-yellow-600': indicator.status === 'warning',
                                    'text-gray-800': indicator.status === 'normal'
                                }">{{ indicator.value }}</span>
                                <span class="text-xs text-gray-500">{{ indicator.unit }}</span>
                            </div>
                            <div class="mt-2 text-xs text-gray-500">{{ indicator.location }}</div>
                            <div class="mt-2">
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full" :style="{ width: indicator.percentage + '%' }"
                                        :class="{
                                            'bg-red-500': indicator.status === 'alert',
                                            'bg-yellow-500': indicator.status === 'warning',
                                            'bg-green-500': indicator.status === 'normal'
                                        }"></div>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center text-xs">
                                <span>{{ indicator.range[0] }} {{ indicator.unit }}</span>
                                <span>{{ indicator.range[1] }} {{ indicator.unit }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 重点区域监控视频流 & 区域间指标对比 -->
                <div class="grid grid-cols-3 gap-6">
                    <!-- 重点区域监控视频流 -->
                    <div class="bg-white rounded-lg shadow-sm col-span-2">
                        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                            <h2 class="font-bold text-gray-700">重点区域监控视频</h2>
                            <div class="flex space-x-2">
                                <button @click="toggleGridView"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap text-sm"
                                    :class="isGridView ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'">
                                    <i class="fas fa-th mr-1"></i> 网格视图
                                </button>
                                <button @click="toggleFullscreen"
                                    class="px-3 py-1 bg-blue-600 text-white rounded !rounded-button whitespace-nowrap text-sm">
                                    <i class="fas fa-expand-alt mr-1"></i> 全屏查看
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <div :class="{ 'grid grid-cols-2 gap-4': !isGridView, 'grid grid-cols-4 gap-2': isGridView }">
                                <div v-for="(video, index) in videoStreams" :key="index"
                                    class="relative rounded-lg overflow-hidden"
                                    :class="{ 'h-48': !isGridView, 'h-32': isGridView }">
                                    <img :src="video.thumbnail" class="w-full object-cover"
                                        :class="{ 'h-48': !isGridView, 'h-32': isGridView }"
                                        :alt="`${video.location}监控视频`" />
                                    <div
                                        class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0">
                                        <button
                                            class="w-12 h-12 rounded-full bg-white bg-opacity-80 flex items-center justify-center !rounded-button whitespace-nowrap">
                                            <i class="fas fa-play text-blue-600"></i>
                                        </button>
                                    </div>
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-2">
                                        <div class="flex justify-between items-center">
                                            <span class="text-sm">{{ video.location }}</span>
                                            <div class="flex items-center space-x-2">
                                                <i class="fas fa-circle text-xs" :class="{
                                                    'text-green-500': video.status === 'online',
                                                    'text-red-500': video.status === 'offline'
                                                }"></i>
                                                <span class="text-xs">{{ video.status === 'online' ? '在线' : '离线'
                                                }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 区域间指标对比 -->
                    <div class="bg-white rounded-lg shadow-sm">
                        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                            <h2 class="font-bold text-gray-700">区域指标对比</h2>
                            <div>
                                <select v-model="selectedComparisonIndicator"
                                    class="text-sm bg-gray-100 border-none rounded px-3 py-1 !rounded-button whitespace-nowrap cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option v-for="option in comparisonIndicatorOptions" :key="option.value"
                                        :value="option.value">
                                        {{ option.label }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="p-4">
                            <div id="areaComparisonChart" class="h-80" ref="areaComparisonChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 通知容器 -->
        <div class="fixed top-20 right-4 z-50 space-y-2">
            <div v-for="(notification, index) in notifications" :key="index"
                class="bg-white rounded-lg shadow-lg p-4 max-w-sm border-l-4 animate-fade-in" :class="{
                    'border-green-500': notification.type === 'success',
                    'border-blue-500': notification.type === 'info',
                    'border-yellow-500': notification.type === 'warning',
                    'border-red-500': notification.type === 'error'
                }">
                <div class="flex items-start">
                    <i :class="{
                        'fas fa-check-circle text-green-500': notification.type === 'success',
                        'fas fa-info-circle text-blue-500': notification.type === 'info',
                        'fas fa-exclamation-triangle text-yellow-500': notification.type === 'warning',
                        'fas fa-exclamation-circle text-red-500': notification.type === 'error'
                    }" class="mt-0.5 mr-3"></i>
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-900">{{ notification.title }}</p>
                        <p class="text-sm text-gray-600">{{ notification.message }}</p>
                    </div>
                    <button @click="removeNotification(index)" class="ml-4 text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 通用弹窗组件 -->
        <div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[80vh] flex flex-col">
                <!-- 弹窗标题 -->
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="font-bold text-lg text-gray-800">{{ modalTitle }}</h3>
                    <button @click="closeModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <!-- 弹窗内容 -->
                <div class="p-6 overflow-y-auto flex-1">
                    <!-- 告警趋势详情内容 -->
                    <div v-if="modalType === 'trend'" class="space-y-4">
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-2">
                                <button v-for="period in trendPeriods" :key="period.value"
                                    class="px-3 py-1 text-sm rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="selectedTrendPeriod === period.value ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 hover:bg-gray-200'"
                                    @click="changeTrendPeriod(period.value)">
                                    {{ period.label }}
                                </button>
                            </div>     
                        </div>
                        <div id="detailedTrendChart" class="h-80" ref="detailedTrendChart"></div>
                        <div class="mt-4">
                            <h4 class="font-medium text-gray-700 mb-2">告警统计数据</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col"
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                日期</th>
                                            <th scope="col"
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                严重告警</th>
                                            <th scope="col"
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                警告告警</th>
                                            <th scope="col"
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                注意告警</th>
                                            <th scope="col"
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                总计</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="(item, index) in trendTableData" :key="index">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item.date
                                                }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                item.critical }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                item.warning }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                item.caution }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{
                                                item.total }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 最新告警全部内容 -->
                    <div v-if="modalType === 'alerts'" class="space-y-4">
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-2">
                                <button v-for="status in alertStatuses" :key="status.value"
                                    class="px-3 py-1 text-sm rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="selectedAlertStatus === status.value ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 hover:bg-gray-200'"
                                    @click="changeAlertStatus(status.value)">
                                    {{ status.label }}
                                </button>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="text" v-model="alertSearchKeyword" placeholder="搜索告警信息..."
                                    class="text-sm border rounded p-1 w-48">
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col"
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            告警级别</th>
                                        <th scope="col"
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            告警内容</th>
                                        <th scope="col"
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            区域</th>
                                        <th scope="col"
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            时间</th>
                                        <th scope="col"
                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            状态</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr v-for="(alert, index) in filteredAlerts" :key="index">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs rounded-full" :class="{
                                                'bg-red-100 text-red-800': alert.level === 'critical',
                                                'bg-orange-100 text-orange-800': alert.level === 'warning',
                                                'bg-yellow-100 text-yellow-800': alert.level === 'caution'
                                            }">
                                                {{ alert.levelText }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ alert.title }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ alert.location
                                            }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ alert.time }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ alert.status }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="flex justify-between items-center mt-4">
                            <div class="text-sm text-gray-500">
                                共 {{ totalFilteredAlerts }} 条记录
                            </div>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm rounded bg-gray-100 hover:bg-gray-200"
                                    :disabled="currentPage === 1" @click="currentPage--">
                                    上一页
                                </button>
                                <span class="px-3 py-1 text-sm">{{ currentPage }} / {{ totalPages }}</span>
                                <button class="px-3 py-1 text-sm rounded bg-gray-100 hover:bg-gray-200"
                                    :disabled="currentPage === totalPages" @click="currentPage++">
                                    下一页
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 弹窗底部 -->
                <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
                    <button @click="closeModal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import Header from '../components/Header.vue';

export default {
    components: {
    Header,
  },
    name: 'RegionalDisplay',
    setup() {
        const router = useRouter();
        // 用户信息
        const userInfo = reactive({
            name: '管理员',
            role: 'admin',
            avatar: ''
        });

        // 通知数量
        const notificationCount = ref(3);

        // 网格视图状态
        const isGridView = ref(false);

        // 全屏查看状态
        const isFullscreen = ref(false);

        // 当前激活的视频索引
        const activeVideoIndex = ref(0);

        // 菜单数据
        const mainMenus = ref([
            {
                name: '监测报警',
                icon: 'fas fa-bell',
                expanded: true,
                active: true,
                subMenus: [
                    { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                    { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                    { name: '区域化展示', active: true, link: '/regional-display' }
                ]
            },
            {
                name: '风险研判',
                icon: 'fas fa-exclamation-triangle',
                expanded: false,
                active: false,
                subMenus: [
                    { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                    { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                    { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                    // { name: '重点风险提示', active: false, link: '/focus' },
                ]
            },
            {
                name: '在线巡查',
                icon: 'fas fa-search',
                expanded: false,
                active: false,
                subMenus: [
                    { name: '企业信息汇总', active: false, link: '/summary-information' },
                    { name: '巡查功能', active: false, link: '/patrol' },
                    { name: '检索功能', active: false, link: 'search' },
                    { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                ]
            },
            {
                name: '综合分析',
                icon: 'fas fa-chart-line',
                expanded: false,
                active: false,
                subMenus: [
                    { name: '联网与设备分析', active: false, link: '/equipment' },
                    { name: '应用情况分析', active: false, link: '/application' },
                    { name: '数据质量分析', active: false, link: '/data-quality' },
                    { name: '定期专题报告', active: false, link: 'report' }
                ]
            },
            {
                name: '系统管理',
                icon: 'fas fa-cog',
                eexpanded: false,
                active: false,
                subMenus: [
                    { name: '用户权限管理', active: false, link: 'user-permission' },
                    { name: '系统配置管理', active: false, link: 'system-manage' },
                    { name: '数据管理', active: false, link: 'data-manage' },
                    { name: '系统监控与维护', active: false, link: 'monitoring' }
                ]
            }
        ]);

        // 区域选项
        const areaOptions = ref([
            { label: '全部区域', value: 'all', icon: 'fas fa-globe', bgColor: 'bg-blue-600', alertCount: 36 },
            { label: '炼铁厂', value: 'ironmaking', icon: 'fas fa-fire', bgColor: 'bg-red-600', alertCount: 12 },
            { label: '炼钢厂', value: 'steelmaking', icon: 'fas fa-industry', bgColor: 'bg-orange-600', alertCount: 9 },
            { label: '轧钢厂', value: 'rolling', icon: 'fas fa-cogs', bgColor: 'bg-yellow-600', alertCount: 7 },
            { label: '烧结厂', value: 'sintering', icon: 'fas fa-burn', bgColor: 'bg-green-600', alertCount: 5 },
            { label: '动力厂', value: 'power', icon: 'fas fa-bolt', bgColor: 'bg-purple-600', alertCount: 3 },
            { label: '原料厂', value: 'raw', icon: 'fas fa-boxes', bgColor: 'bg-indigo-600', alertCount: 0 }
        ]);

        // 选中的区域
        const selectedArea = ref('all');

        // 地图视图选项
        const mapViews = ref([
            { label: '安全状态', value: 'safety' },
            { label: '监测覆盖', value: 'coverage' },
            { label: '告警分布', value: 'alerts' }
        ]);

        // 选中的地图视图
        const selectedMapView = ref('safety');

        // 图例计数
        const legendCounts = reactive({
            normal: 28,
            warning: 15,
            alert: 7
        });

        // 时间范围
        const timeRange = reactive({
            value: '7days',
            label: '近7天'
        });

        // 时间范围选项
        const timeRangeOptions = ref([
            { value: 'today', label: '今日' },
            { value: '3days', label: '近3天' },
            { value: '7days', label: '近7天' },
            { value: '30days', label: '近30天' },
        ]);

        // 显示时间范围下拉菜单
        const showTimeRangeDropdown = ref(false);

        // 选择时间范围
        const selectTimeRange = (option) => {
            timeRange.value = option.value;
            timeRange.label = option.label;
            showTimeRangeDropdown.value = false;
            // 这里可以添加刷新数据的逻辑
            refreshData();
        };

        // 总告警数
        const totalAlerts = ref(50);

        // 最新告警
        const latestAlerts = ref([
            { level: 'critical', title: '高炉煤气压力超限', location: '炼铁厂 - 3号高炉', time: '10:35:12' },
            { level: 'warning', title: '转炉温度异常', location: '炼钢厂 - 2号转炉', time: '09:47:23' },
            { level: 'warning', title: '废气排放浓度超标', location: '烧结厂 - 1号烧结机', time: '09:22:56' },
            { level: 'caution', title: '冷却水流量不足', location: '连铸车间 - 冷却系统', time: '08:53:41' }
        ]);

        // 实时监测指标
        const realTimeIndicators = ref([
            {
                name: '高炉煤气压力',
                value: '28.5',
                unit: 'kPa',
                status: 'alert',
                statusText: '告警',
                location: '炼铁厂 - 3号高炉',
                percentage: 95,
                range: [0, 30]
            },
            {
                name: '转炉温度',
                value: '1650',
                unit: '℃',
                status: 'warning',
                statusText: '预警',
                location: '炼钢厂 - 2号转炉',
                percentage: 85,
                range: [1400, 1700]
            },
            {
                name: '废气排放浓度',
                value: '42',
                unit: 'mg/m³',
                status: 'warning',
                statusText: '预警',
                location: '烧结厂 - 1号烧结机',
                percentage: 80,
                range: [0, 50]
            },
            {
                name: '冷却水流量',
                value: '185',
                unit: 'm³/h',
                status: 'warning',
                statusText: '预警',
                location: '连铸车间 - 冷却系统',
                percentage: 75,
                range: [150, 250]
            },
            {
                name: '电机振动值',
                value: '4.8',
                unit: 'mm/s',
                status: 'normal',
                statusText: '正常',
                location: '轧钢厂 - 主传动电机',
                percentage: 60,
                range: [0, 8]
            },
            {
                name: '氧含量',
                value: '21.2',
                unit: '%',
                status: 'normal',
                statusText: '正常',
                location: '炼钢厂 - 1号转炉',
                percentage: 50,
                range: [18, 25]
            },
            {
                name: '轧机轧制力',
                value: '12500',
                unit: 'kN',
                status: 'normal',
                statusText: '正常',
                location: '轧钢厂 - 粗轧机',
                percentage: 65,
                range: [8000, 15000]
            },
            {
                name: '水泵压力',
                value: '0.65',
                unit: 'MPa',
                status: 'normal',
                statusText: '正常',
                location: '动力厂 - 循环水系统',
                percentage: 55,
                range: [0.4, 0.8]
            }
        ]);

        // 视频流数据
        const videoStreams = ref([
            {
                location: '炼铁厂 - 3号高炉',
                thumbnail: 'https://readdy.ai/api/search-image?query=industrial%20steel%20factory%20blast%20furnace%20with%20molten%20metal%20and%20workers%20in%20safety%20gear%2C%20high%20quality%20industrial%20photography%2C%20realistic%2C%20detailed%2C%20professional%20lighting&width=400&height=240&seq=1&orientation=landscape',
                status: 'online'
            },
            {
                location: '炼钢厂 - 2号转炉',
                thumbnail: 'https://readdy.ai/api/search-image?query=steel%20factory%20converter%20with%20sparks%20and%20molten%20steel%20pouring%2C%20industrial%20environment%2C%20safety%20monitoring%20camera%20view%2C%20realistic%2C%20detailed%2C%20professional%20lighting&width=400&height=240&seq=2&orientation=landscape',
                status: 'online'
            },
            {
                location: '轧钢厂 - 热轧生产线',
                thumbnail: 'https://readdy.ai/api/search-image?query=hot%20rolling%20mill%20production%20line%20in%20steel%20factory%20with%20red%20hot%20steel%20sheets%20moving%20through%20rollers%2C%20industrial%20environment%2C%20realistic%2C%20detailed%2C%20professional%20lighting&width=400&height=240&seq=3&orientation=landscape',
                status: 'online'
            },
            {
                location: '烧结厂 - 1号烧结机',
                thumbnail: 'https://readdy.ai/api/search-image?query=sintering%20machine%20in%20steel%20factory%20with%20glowing%20hot%20material%20being%20processed%2C%20industrial%20environment%20with%20steam%20and%20heat%2C%20realistic%2C%20detailed%2C%20professional%20lighting&width=400&height=240&seq=4&orientation=landscape',
                status: 'offline'
            }
        ]);

        // 对比指标选项
        const comparisonIndicatorOptions = ref([
            { label: '温度指标', value: 'temperature' },
            { label: '压力指标', value: 'pressure' },
            { label: '流量指标', value: 'flow' },
            { label: '浓度指标', value: 'concentration' },
            { label: '振动指标', value: 'vibration' }
        ]);

        // 选中的对比指标
        const selectedComparisonIndicator = ref('temperature');

        // 导出状态
        const isExporting = ref(false);
        const exportProgress = ref(0);

        // 通知系统
        const notifications = ref([]);

        // 图表引用
        const areaMapChart = ref(null);
        const alertLevelChart = ref(null);
        const alertTrendChart = ref(null);
        const areaComparisonChart = ref(null);
        const detailedTrendChart = ref(null);

        // 弹窗相关数据
        const showModal = ref(false);
        const modalType = ref('');
        const modalTitle = ref('');

        // 告警趋势详情相关数据
        const trendPeriods = ref([
            { label: '近7天', value: '7days' },
            { label: '近30天', value: '30days' },
            { label: '近3个月', value: '3months' },
            { label: '近1年', value: '1year' }
        ]);
        const selectedTrendPeriod = ref('7days');
        const trendFilterLevel = ref('all');
        const trendTableData = ref([
            { date: '2024-01-15', critical: 3, warning: 5, caution: 2, total: 10 },
            { date: '2024-01-14', critical: 2, warning: 7, caution: 4, total: 13 },
            { date: '2024-01-13', critical: 1, warning: 3, caution: 6, total: 10 },
            { date: '2024-01-12', critical: 4, warning: 2, caution: 3, total: 9 },
            { date: '2024-01-11', critical: 2, warning: 6, caution: 1, total: 9 },
            { date: '2024-01-10', critical: 3, warning: 4, caution: 5, total: 12 },
            { date: '2024-01-09', critical: 1, warning: 8, caution: 2, total: 11 }
        ]);

        // 最新告警全部数据相关
        const alertStatuses = ref([
            { label: '全部', value: 'all' },
            { label: '未处理', value: 'pending' },
            { label: '处理中', value: 'processing' },
            { label: '已处理', value: 'resolved' }
        ]);
        const selectedAlertStatus = ref('all');
        const alertSearchKeyword = ref('');
        const currentPage = ref(1);
        const pageSize = ref(10);

        // 完整的告警数据
        const allAlerts = ref([
            { level: 'critical', levelText: '严重', title: '高炉煤气压力超限', location: '炼铁厂 - 3号高炉', time: '2024-01-15 10:35:12', status: '未处理' },
            { level: 'warning', levelText: '警告', title: '转炉温度异常', location: '炼钢厂 - 2号转炉', time: '2024-01-15 09:47:23', status: '处理中' },
            { level: 'warning', levelText: '警告', title: '废气排放浓度超标', location: '烧结厂 - 1号烧结机', time: '2024-01-15 09:22:56', status: '未处理' },
            { level: 'caution', levelText: '注意', title: '冷却水流量不足', location: '连铸车间 - 冷却系统', time: '2024-01-15 08:53:41', status: '已处理' },
            { level: 'critical', levelText: '严重', title: '轧机振动异常', location: '轧钢厂 - 主轧机', time: '2024-01-15 08:15:30', status: '未处理' },
            { level: 'warning', levelText: '警告', title: '氧含量偏低', location: '炼钢厂 - 1号转炉', time: '2024-01-15 07:42:18', status: '处理中' },
            { level: 'caution', levelText: '注意', title: '水泵压力波动', location: '动力厂 - 循环水系统', time: '2024-01-15 07:20:45', status: '已处理' },
            { level: 'critical', levelText: '严重', title: '烟气温度过高', location: '烧结厂 - 2号烧结机', time: '2024-01-14 23:58:12', status: '未处理' },
            { level: 'warning', levelText: '警告', title: '液压系统压力不稳', location: '轧钢厂 - 液压站', time: '2024-01-14 22:35:47', status: '处理中' },
            { level: 'caution', levelText: '注意', title: '除尘器效率下降', location: '炼铁厂 - 除尘系统', time: '2024-01-14 21:18:33', status: '已处理' },
            { level: 'critical', levelText: '严重', title: '煤气管道压力异常', location: '动力厂 - 煤气管网', time: '2024-01-14 20:45:22', status: '未处理' },
            { level: 'warning', levelText: '警告', title: '冷却塔温度偏高', location: '炼钢厂 - 冷却系统', time: '2024-01-14 19:32:15', status: '处理中' }
        ]);

        // 计算属性
        const filteredAlerts = computed(() => {
            let filtered = allAlerts.value;

            // 按状态筛选
            if (selectedAlertStatus.value !== 'all') {
                const statusMap = {
                    'pending': '未处理',
                    'processing': '处理中',
                    'resolved': '已处理'
                };
                filtered = filtered.filter(alert => alert.status === statusMap[selectedAlertStatus.value]);
            }

            // 按关键词搜索
            if (alertSearchKeyword.value) {
                const keyword = alertSearchKeyword.value.toLowerCase();
                filtered = filtered.filter(alert =>
                    alert.title.toLowerCase().includes(keyword) ||
                    alert.location.toLowerCase().includes(keyword)
                );
            }

            // 分页
            const start = (currentPage.value - 1) * pageSize.value;
            const end = start + pageSize.value;
            return filtered.slice(start, end);
        });

        const totalFilteredAlerts = computed(() => {
            let filtered = allAlerts.value;

            if (selectedAlertStatus.value !== 'all') {
                const statusMap = {
                    'pending': '未处理',
                    'processing': '处理中',
                    'resolved': '已处理'
                };
                filtered = filtered.filter(alert => alert.status === statusMap[selectedAlertStatus.value]);
            }

            if (alertSearchKeyword.value) {
                const keyword = alertSearchKeyword.value.toLowerCase();
                filtered = filtered.filter(alert =>
                    alert.title.toLowerCase().includes(keyword) ||
                    alert.location.toLowerCase().includes(keyword)
                );
            }

            return filtered.length;
        });

        const totalPages = computed(() => {
            return Math.ceil(totalFilteredAlerts.value / pageSize.value);
        });

        // 菜单操作
        const toggleMenu = (index) => {
            mainMenus.value[index].expanded = !mainMenus.value[index].expanded;

            // 如果展开了菜单，则将其他菜单收起
            if (mainMenus.value[index].expanded) {
                mainMenus.value.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        };

        const selectSubmenu = (menuIndex, submenuIndex, event) => {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }

            // 重置所有菜单的激活状态
            mainMenus.value.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });

            // 设置当前选中的菜单和子菜单为激活状态
            mainMenus.value[menuIndex].active = true;
            mainMenus.value[menuIndex].subMenus[submenuIndex].active = true;
            const link = mainMenus.value[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                router.push(dest);
            }
        };

        // 区域操作
        const selectArea = (area) => {
            selectedArea.value = area;
            // 在实际应用中，这里会调用API获取区域数据
            refreshCharts();
        };

        // const changeMapView = (view) => {
        //     selectedMapView.value = view;
        //     initAreaMapChart();
        // };

        // 数据刷新
        // const refreshData = () => {
        //     showNotification('数据刷新中...', 'info');

        //     // 模拟数据刷新
        //     setTimeout(() => {
        //         // 更新一些动态数据
        //         legendCounts.normal = Math.floor(Math.random() * 10) + 25;
        //         legendCounts.warning = Math.floor(Math.random() * 8) + 10;
        //         legendCounts.alert = Math.floor(Math.random() * 5) + 5;

        //         totalAlerts.value = legendCounts.normal + legendCounts.warning + legendCounts.alert;

        //         // 更新区域告警计数
        //         areaOptions.value.forEach(area => {
        //             if (area.value !== 'all') {
        //                 area.alertCount = Math.floor(Math.random() * 15);
        //             }
        //         });

        //         refreshCharts();
        //         showNotification('数据刷新完成', 'success');
        //     }, 1000);
        // };

        // 导出报告
        const exportReport = () => {
            if (isExporting.value) return;

            isExporting.value = true;
            exportProgress.value = 0;

            // 模拟导出进度
            const interval = setInterval(() => {
                exportProgress.value += 10;
                if (exportProgress.value >= 100) {
                    clearInterval(interval);

                    // 生成并下载报告
                    generateReport();

                    // 显示完成状态
                    setTimeout(() => {
                        isExporting.value = false;
                        showNotification('报告导出成功！', 'success');
                    }, 500);
                }
            }, 200);
        };

        // 切换网格视图
        const toggleGridView = () => {
            isGridView.value = !isGridView.value;
            isFullscreen.value = false; // 退出全屏模式
        };

        // 切换全屏查看
        const toggleFullscreen = () => {
            isFullscreen.value = !isFullscreen.value;
            if (!isFullscreen.value) {
                isGridView.value = false; // 退出全屏时恢复默认视图
            }
        };

        // 激活视频
        const activateVideo = (index) => {
            activeVideoIndex.value = index;
            if (!isFullscreen.value) {
                isFullscreen.value = true;
            }
        };

        const generateReport = () => {
            // 创建报告数据
            const reportData = {
                title: '安全生产监管报告',
                date: new Date().toLocaleDateString(),
                selectedArea: selectedArea.value,
                totalAlerts: totalAlerts.value,
                indicators: realTimeIndicators.value,
                legendCounts: { ...legendCounts },
                latestAlerts: [...latestAlerts.value]
            };

            // 创建并下载JSON文件
            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(reportData, null, 2));
            const downloadAnchorNode = document.createElement('a');
            downloadAnchorNode.setAttribute("href", dataStr);
            downloadAnchorNode.setAttribute("download", `安全生产报告_${new Date().toISOString().split('T')[0]}.json`);
            document.body.appendChild(downloadAnchorNode);
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        };

        // 通知系统
        const showNotification = (message, type = 'info', duration = 5000) => {
            const notification = {
                id: Date.now(),
                title: type === 'success' ? '操作成功' :
                    type === 'warning' ? '注意' :
                        type === 'error' ? '错误' : '信息',
                message: message,
                type: type
            };

            notifications.value.push(notification);

            // 自动移除通知
            setTimeout(() => {
                removeNotificationById(notification.id);
            }, duration);
        };

        const removeNotification = (index) => {
            notifications.value.splice(index, 1);
        };

        const removeNotificationById = (id) => {
            const index = notifications.value.findIndex(n => n.id === id);
            if (index !== -1) {
                notifications.value.splice(index, 1);
            }
        };

        // 弹窗相关方法
        const openTrendDetails = () => {
            modalType.value = 'trend';
            modalTitle.value = '告警趋势详情';
            showModal.value = true;

            // 延迟初始化图表，确保DOM已渲染
            nextTick(() => {
                initDetailedTrendChart();
            });
        };

        const openAllAlerts = () => {
            modalType.value = 'alerts';
            modalTitle.value = '全部告警信息';
            showModal.value = true;
            currentPage.value = 1; // 重置分页
        };

        const closeModal = () => {
            showModal.value = false;
            modalType.value = '';
            modalTitle.value = '';

            // 清理图表实例
            if (detailedTrendChart.value && detailedTrendChart.value.chart) {
                detailedTrendChart.value.chart.dispose();
                detailedTrendChart.value.chart = null;
            }
        };

        const changeTrendPeriod = (period) => {
            selectedTrendPeriod.value = period;
            // 根据时间段更新数据
            updateTrendData();
            // 重新初始化图表
            if (detailedTrendChart.value && detailedTrendChart.value.chart) {
                initDetailedTrendChart();
            }
        };

        const changeAlertStatus = (status) => {
            selectedAlertStatus.value = status;
            currentPage.value = 1; // 重置分页
        };

        const updateTrendData = () => {
            // 根据选择的时间段生成不同的数据
            const periods = {
                '7days': [
                    { date: '2024-01-15', critical: 3, warning: 5, caution: 2, total: 10 },
                    { date: '2024-01-14', critical: 2, warning: 7, caution: 4, total: 13 },
                    { date: '2024-01-13', critical: 1, warning: 3, caution: 6, total: 10 },
                    { date: '2024-01-12', critical: 4, warning: 2, caution: 3, total: 9 },
                    { date: '2024-01-11', critical: 2, warning: 6, caution: 1, total: 9 },
                    { date: '2024-01-10', critical: 3, warning: 4, caution: 5, total: 12 },
                    { date: '2024-01-09', critical: 1, warning: 8, caution: 2, total: 11 }
                ],
                '30days': [
                    { date: '2024-01-15', critical: 15, warning: 25, caution: 12, total: 52 },
                    { date: '2024-01-10', critical: 12, warning: 30, caution: 18, total: 60 },
                    { date: '2024-01-05', critical: 8, warning: 22, caution: 15, total: 45 },
                    { date: '2023-12-31', critical: 20, warning: 35, caution: 10, total: 65 },
                    { date: '2023-12-25', critical: 18, warning: 28, caution: 14, total: 60 },
                    { date: '2023-12-20', critical: 10, warning: 32, caution: 20, total: 62 }
                ],
                '3months': [
                    { date: '2024-01月', critical: 45, warning: 85, caution: 60, total: 190 },
                    { date: '2023-12月', critical: 52, warning: 92, caution: 48, total: 192 },
                    { date: '2023-11月', critical: 38, warning: 78, caution: 55, total: 171 }
                ],
                '1year': [
                    { date: '2024年Q1', critical: 120, warning: 250, caution: 180, total: 550 },
                    { date: '2023年Q4', critical: 135, warning: 280, caution: 165, total: 580 },
                    { date: '2023年Q3', critical: 98, warning: 220, caution: 195, total: 513 },
                    { date: '2023年Q2', critical: 110, warning: 240, caution: 170, total: 520 }
                ]
            };

            trendTableData.value = periods[selectedTrendPeriod.value] || periods['7days'];
        };

        const initDetailedTrendChart = () => {
            const chartDom = document.getElementById('detailedTrendChart');
            if (!chartDom) return;

            // 销毁现有图表实例
            if (detailedTrendChart.value && detailedTrendChart.value.chart) {
                detailedTrendChart.value.chart.dispose();
            }

            const myChart = echarts.init(chartDom);
            detailedTrendChart.value = { chart: myChart };

            const dates = trendTableData.value.map(item => item.date);
            const criticalData = trendTableData.value.map(item => item.critical);
            const warningData = trendTableData.value.map(item => item.warning);
            const cautionData = trendTableData.value.map(item => item.caution);

            const option = {
                title: {
                    text: '告警趋势详细分析',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['严重告警', '警告告警', '注意告警'],
                    bottom: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value',
                    name: '告警数量'
                },
                series: [
                    {
                        name: '严重告警',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: criticalData,
                        itemStyle: {
                            color: '#ef4444'
                        }
                    },
                    {
                        name: '警告告警',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: warningData,
                        itemStyle: {
                            color: '#f97316'
                        }
                    },
                    {
                        name: '注意告警',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: cautionData,
                        itemStyle: {
                            color: '#eab308'
                        }
                    }
                ]
            };

            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        };

        // 图表初始化
        // const initAreaMapChart = () => {
        //     if (!areaMapChart.value) return;

        //     const chart = echarts.init(areaMapChart.value);
        //     const option = {
        //         animation: false,
        //         tooltip: {
        //             trigger: 'item',
        //             formatter: '{b}<br/>安全指数: {c}%'
        //         },
        //         legend: {
        //             orient: 'horizontal',
        //             top: 10,
        //             right: 10,
        //             data: ['正常', '预警', '告警']
        //         },
        //         series: [
        //             {
        //                 type: 'graph',
        //                 layout: 'none',
        //                 symbolSize: 50,
        //                 roam: true,
        //                 label: {
        //                     show: true,
        //                     position: 'inside',
        //                     formatter: '{b}',
        //                     fontSize: 12,
        //                     color: '#fff'
        //                 },
        //                 edgeSymbol: ['circle', 'arrow'],
        //                 edgeSymbolSize: [4, 10],
        //                 edgeLabel: {
        //                     fontSize: 12
        //                 },
        //                 data: [
        //                     {
        //                         name: '炼铁厂',
        //                         value: 85,
        //                         x: 300,
        //                         y: 300,
        //                         itemStyle: { color: '#f56565' },
        //                         symbolSize: 80
        //                     },
        //                     {
        //                         name: '炼钢厂',
        //                         value: 92,
        //                         x: 500,
        //                         y: 200,
        //                         itemStyle: { color: '#ed8936' },
        //                         symbolSize: 70
        //                     },
        //                     {
        //                         name: '轧钢厂',
        //                         value: 78,
        //                         x: 700,
        //                         y: 300,
        //                         itemStyle: { color: '#ecc94b' },
        //                         symbolSize: 75
        //                     },
        //                     {
        //                         name: '烧结厂',
        //                         value: 65,
        //                         x: 400,
        //                         y: 100,
        //                         itemStyle: { color: '#48bb78' },
        //                         symbolSize: 65
        //                     },
        //                     {
        //                         name: '动力厂',
        //                         value: 95,
        //                         x: 600,
        //                         y: 400,
        //                         itemStyle: { color: '#4299e1' },
        //                         symbolSize: 60
        //                     },
        //                     {
        //                         name: '原料厂',
        //                         value: 88,
        //                         x: 200,
        //                         y: 200,
        //                         itemStyle: { color: '#667eea' },
        //                         symbolSize: 55
        //                     }
        //                 ],
        //                 links: [
        //                     {
        //                         source: '炼铁厂',
        //                         target: '炼钢厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     },
        //                     {
        //                         source: '炼钢厂',
        //                         target: '轧钢厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     },
        //                     {
        //                         source: '烧结厂',
        //                         target: '炼铁厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     },
        //                     {
        //                         source: '原料厂',
        //                         target: '烧结厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     },
        //                     {
        //                         source: '动力厂',
        //                         target: '炼铁厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     },
        //                     {
        //                         source: '动力厂',
        //                         target: '炼钢厂',
        //                         lineStyle: {
        //                             color: '#cbd5e0',
        //                             width: 2
        //                         }
        //                     }
        //                 ]
        //             },
        //             {
        //                 name: '告警点',
        //                 type: 'effectScatter',
        //                 coordinateSystem: 'none',
        //                 data: [
        //                     {
        //                         name: '3号高炉告警',
        //                         value: 100,
        //                         x: 300,
        //                         y: 300,
        //                         symbolSize: 20
        //                     },
        //                     {
        //                         name: '2号转炉告警',
        //                         value: 90,
        //                         x: 500,
        //                         y: 200,
        //                         symbolSize: 15
        //                     },
        //                     {
        //                         name: '1号烧结机告警',
        //                         value: 85,
        //                         x: 400,
        //                         y: 100,
        //                         symbolSize: 12
        //                     }
        //                 ],
        //                 showEffectOn: 'render',
        //                 rippleEffect: {
        //                     brushType: 'stroke'
        //                 },
        //                 hoverAnimation: true,
        //                 itemStyle: {
        //                     color: '#f56565',
        //                     shadowBlur: 10,
        //                     shadowColor: 'rgba(0, 0, 0, 0.3)'
        //                 },
        //                 zlevel: 1
        //             }
        //         ]
        //     };
        //     chart.setOption(option);

        //     // 添加响应式调整
        //     const handleResize = () => {
        //         chart.resize();
        //     };

        //     window.addEventListener('resize', handleResize);

        //     // 返回清理函数
        //     return () => {
        //         window.removeEventListener('resize', handleResize);
        //         chart.dispose();
        //     };
        // };
        // 地图视图数据
        const mapViewData = reactive({
            safety: {
                title: '安全状态',
                legends: [
                    { type: 'normal', label: '正常', color: 'bg-green-500', count: 28 },
                    { type: 'warning', label: '预警', color: 'bg-yellow-500', count: 15 },
                    { type: 'alert', label: '告警', color: 'bg-red-500', count: 7 }
                ],
                nodes: [
                    { name: '炼铁厂', value: 85, x: 300, y: 300, itemStyle: { color: '#f56565' }, symbolSize: 80, status: 'warning' },
                    { name: '炼钢厂', value: 92, x: 500, y: 200, itemStyle: { color: '#48bb78' }, symbolSize: 70, status: 'normal' },
                    { name: '轧钢厂', value: 78, x: 700, y: 300, itemStyle: { color: '#ecc94b' }, symbolSize: 75, status: 'warning' },
                    { name: '烧结厂', value: 65, x: 400, y: 100, itemStyle: { color: '#f56565' }, symbolSize: 65, status: 'alert' },
                    { name: '动力厂', value: 95, x: 600, y: 400, itemStyle: { color: '#48bb78' }, symbolSize: 60, status: 'normal' },
                    { name: '原料厂', value: 88, x: 200, y: 200, itemStyle: { color: '#48bb78' }, symbolSize: 55, status: 'normal' }
                ],
                alerts: [
                    { name: '3号高炉告警', value: 100, x: 300, y: 300, symbolSize: 20 },
                    { name: '1号烧结机告警', value: 85, x: 400, y: 100, symbolSize: 12 }
                ]
            },
            coverage: {
                title: '监测覆盖',
                legends: [
                    { type: 'high', label: '高覆盖', color: 'bg-green-500', count: 4 },
                    { type: 'medium', label: '中覆盖', color: 'bg-yellow-500', count: 1 },
                    { type: 'low', label: '低覆盖', color: 'bg-red-500', count: 1 }
                ],
                nodes: [
                    { name: '炼铁厂', value: 95, x: 300, y: 300, itemStyle: { color: '#48bb78' }, symbolSize: 80, status: 'high' },
                    { name: '炼钢厂', value: 88, x: 500, y: 200, itemStyle: { color: '#48bb78' }, symbolSize: 70, status: 'high' },
                    { name: '轧钢厂', value: 75, x: 700, y: 300, itemStyle: { color: '#ecc94b' }, symbolSize: 75, status: 'medium' },
                    { name: '烧结厂', value: 92, x: 400, y: 100, itemStyle: { color: '#48bb78' }, symbolSize: 65, status: 'high' },
                    { name: '动力厂', value: 85, x: 600, y: 400, itemStyle: { color: '#48bb78' }, symbolSize: 60, status: 'high' },
                    { name: '原料厂', value: 60, x: 200, y: 200, itemStyle: { color: '#f56565' }, symbolSize: 55, status: 'low' }
                ],
                alerts: []
            },
            alerts: {
                title: '告警分布',
                legends: [
                    { type: 'critical', label: '严重告警', color: 'bg-red-500', count: 3 },
                    { type: 'warning', label: '一般告警', color: 'bg-orange-500', count: 5 },
                    { type: 'normal', label: '无告警', color: 'bg-green-500', count: 2 }
                ],
                nodes: [
                    { name: '炼铁厂', value: 3, x: 300, y: 300, itemStyle: { color: '#f56565' }, symbolSize: 80, status: 'critical' },
                    { name: '炼钢厂', value: 1, x: 500, y: 200, itemStyle: { color: '#ed8936' }, symbolSize: 70, status: 'warning' },
                    { name: '轧钢厂', value: 2, x: 700, y: 300, itemStyle: { color: '#ed8936' }, symbolSize: 75, status: 'warning' },
                    { name: '烧结厂', value: 4, x: 400, y: 100, itemStyle: { color: '#f56565' }, symbolSize: 65, status: 'critical' },
                    { name: '动力厂', value: 0, x: 600, y: 400, itemStyle: { color: '#48bb78' }, symbolSize: 60, status: 'normal' },
                    { name: '原料厂', value: 1, x: 200, y: 200, itemStyle: { color: '#ed8936' }, symbolSize: 55, status: 'warning' }
                ],
                alerts: [
                    { name: '3号高炉告警', value: 100, x: 300, y: 300, symbolSize: 20 },
                    { name: '2号转炉告警', value: 90, x: 500, y: 200, symbolSize: 15 },
                    { name: '1号烧结机告警', value: 85, x: 400, y: 100, symbolSize: 12 },
                    { name: '粗轧机告警', value: 80, x: 700, y: 300, symbolSize: 10 }
                ]
            }
        });

        // 当前图例的计算属性
        const currentLegends = computed(() => {
            return mapViewData[selectedMapView.value]?.legends || [];
        });

        // 根据选中值解析区域中文名称
        const resolveSelectedAreaName = () => {
            const areaItem = areaOptions.value.find(a => a.value === selectedArea.value);
            return areaItem ? areaItem.label : '全部区域';
        };

        // 地图图表初始化
        const initAreaMapChart = () => {
            if (!areaMapChart.value) return;

            const chart = echarts.init(areaMapChart.value);
            const currentView = mapViewData[selectedMapView.value];

            if (!currentView) return;

            // 根据当前视图设置tooltip格式
            let tooltipFormatter = '{b}<br/>安全指数: {c}%';
            if (selectedMapView.value === 'coverage') {
                tooltipFormatter = '{b}<br/>监测覆盖率: {c}%';
            } else if (selectedMapView.value === 'alerts') {
                tooltipFormatter = '{b}<br/>告警数量: {c}个';
            }

            // 基于所选区域计算渲染用的节点、连线与告警
            const selectedAreaName = resolveSelectedAreaName();
            const isAll = selectedAreaName === '全部区域';

            // 计算高亮节点
            const renderNodes = currentView.nodes.map(node => {
                const isSelected = !isAll && node.name === selectedAreaName;
                const baseSize = node.symbolSize || 50;
                return {
                    ...node,
                    symbolSize: isSelected ? baseSize + 15 : baseSize,
                    itemStyle: {
                        ...node.itemStyle,
                        opacity: isAll ? 1 : (isSelected ? 1 : 0.25)
                    }
                };
            });

            // 原始连线集合
            const baseLinks = [
                {
                    source: '炼铁厂',
                    target: '炼钢厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                },
                {
                    source: '炼钢厂',
                    target: '轧钢厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                },
                {
                    source: '烧结厂',
                    target: '炼铁厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                },
                {
                    source: '原料厂',
                    target: '烧结厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                },
                {
                    source: '动力厂',
                    target: '炼铁厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                },
                {
                    source: '动力厂',
                    target: '炼钢厂',
                    lineStyle: { color: '#cbd5e0', width: 2 }
                }
            ];

            const renderLinks = isAll
                ? baseLinks
                : baseLinks.filter(l => l.source === selectedAreaName || l.target === selectedAreaName);

            // 告警点按所选区域进行近邻筛选/淡化
            let renderAlerts = currentView.alerts;
            if (!isAll) {
                const selectedNode = currentView.nodes.find(n => n.name === selectedAreaName);
                if (selectedNode) {
                    const threshold = 150;
                    renderAlerts = currentView.alerts.map(a => {
                        const dx = (a.x || 0) - (selectedNode.x || 0);
                        const dy = (a.y || 0) - (selectedNode.y || 0);
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        const isNear = dist <= threshold;
                        return {
                            ...a,
                            itemStyle: {
                                ...(a.itemStyle || {}),
                                opacity: isNear ? 1 : 0.25
                            },
                            symbolSize: (a.symbolSize || 10) * (isNear ? 1 : 0.6)
                        };
                    });
                }
            }

            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: tooltipFormatter
                },
                legend: {
                    orient: 'horizontal',
                    top: 10,
                    right: 10,
                    data: currentView.legends.map(legend => legend.label)
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        roam: true,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{b}',
                            fontSize: 12,
                            color: '#fff'
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 12
                        },
                        data: renderNodes,
                        links: renderLinks
                    },
                    {
                        name: '告警点',
                        type: 'effectScatter',
                        coordinateSystem: 'none',
                        data: renderAlerts,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            color: '#f56565',
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        },
                        zlevel: 1
                    }
                ]
            };
            chart.setOption(option);

            // 添加响应式调整
            const handleResize = () => {
                chart.resize();
            };

            window.addEventListener('resize', handleResize);

            // 返回清理函数
            return () => {
                window.removeEventListener('resize', handleResize);
                chart.dispose();
            };
        };

        // 切换地图视图
        const changeMapView = (view) => {
            selectedMapView.value = view;
            // 更新地图数据
            updateMapViewData();
            initAreaMapChart();
        };

        // 更新地图视图数据
        const updateMapViewData = () => {
            // 模拟数据更新
            if (selectedMapView.value === 'safety') {
                // 更新安全状态数据
                mapViewData.safety.nodes.forEach(node => {
                    // 模拟安全指数的随机变化
                    const change = (Math.random() - 0.5) * 10;
                    node.value = Math.max(0, Math.min(100, node.value + change));

                    // 根据新值更新状态和颜色
                    if (node.value >= 80) {
                        node.status = 'normal';
                        node.itemStyle.color = '#48bb78';
                    } else if (node.value >= 60) {
                        node.status = 'warning';
                        node.itemStyle.color = '#ecc94b';
                    } else {
                        node.status = 'alert';
                        node.itemStyle.color = '#f56565';
                    }
                });

                // 更新图例计数
                const normalCount = mapViewData.safety.nodes.filter(node => node.status === 'normal').length;
                const warningCount = mapViewData.safety.nodes.filter(node => node.status === 'warning').length;
                const alertCount = mapViewData.safety.nodes.filter(node => node.status === 'alert').length;

                mapViewData.safety.legends[0].count = normalCount;
                mapViewData.safety.legends[1].count = warningCount;
                mapViewData.safety.legends[2].count = alertCount;

            } else if (selectedMapView.value === 'coverage') {
                // 更新监测覆盖数据
                mapViewData.coverage.nodes.forEach(node => {
                    // 模拟监测覆盖率的随机变化
                    const change = (Math.random() - 0.5) * 8;
                    node.value = Math.max(50, Math.min(100, node.value + change));

                    // 根据新值更新状态和颜色
                    if (node.value >= 85) {
                        node.status = 'high';
                        node.itemStyle.color = '#48bb78';
                    } else if (node.value >= 70) {
                        node.status = 'medium';
                        node.itemStyle.color = '#ecc94b';
                    } else {
                        node.status = 'low';
                        node.itemStyle.color = '#f56565';
                    }
                });

                // 更新图例计数
                const highCount = mapViewData.coverage.nodes.filter(node => node.status === 'high').length;
                const mediumCount = mapViewData.coverage.nodes.filter(node => node.status === 'medium').length;
                const lowCount = mapViewData.coverage.nodes.filter(node => node.status === 'low').length;

                mapViewData.coverage.legends[0].count = highCount;
                mapViewData.coverage.legends[1].count = mediumCount;
                mapViewData.coverage.legends[2].count = lowCount;

            } else if (selectedMapView.value === 'alerts') {
                // 更新告警分布数据
                mapViewData.alerts.nodes.forEach(node => {
                    // 模拟告警数量的随机变化
                    const change = Math.floor(Math.random() * 3) - 1; // -1, 0, 或 1
                    node.value = Math.max(0, node.value + change);

                    // 根据新值更新状态和颜色
                    if (node.value >= 3) {
                        node.status = 'critical';
                        node.itemStyle.color = '#f56565';
                    } else if (node.value >= 1) {
                        node.status = 'warning';
                        node.itemStyle.color = '#ed8936';
                    } else {
                        node.status = 'normal';
                        node.itemStyle.color = '#48bb78';
                    }
                });

                // 更新告警点
                const newAlerts = [];
                mapViewData.alerts.nodes.forEach(node => {
                    if (node.value > 0) {
                        newAlerts.push({
                            name: `${node.name}告警`,
                            value: 100 - (node.value * 10),
                            x: node.x,
                            y: node.y,
                            symbolSize: 10 + (node.value * 2)
                        });
                    }
                });
                mapViewData.alerts.alerts = newAlerts;

                // 更新图例计数
                const criticalCount = mapViewData.alerts.nodes.filter(node => node.status === 'critical').length;
                const warningCount = mapViewData.alerts.nodes.filter(node => node.status === 'warning').length;
                const normalCount = mapViewData.alerts.nodes.filter(node => node.status === 'normal').length;

                mapViewData.alerts.legends[0].count = criticalCount;
                mapViewData.alerts.legends[1].count = warningCount;
                mapViewData.alerts.legends[2].count = normalCount;
            }
        };

        // 刷新数据时也更新地图数据
        const refreshData = () => {
            showNotification('数据刷新中...', 'info');

            // 更新地图视图数据
            updateMapViewData();

            // 更新其他动态数据
            setTimeout(() => {
                // 更新区域告警计数
                areaOptions.value.forEach(area => {
                    if (area.value !== 'all') {
                        area.alertCount = Math.floor(Math.random() * 15);
                    }
                });

                refreshCharts();
                showNotification('数据刷新完成', 'success');
            }, 1000);
        };

        // 监听选中的区域变化，重绘地图实现联动（不再随机更新数据）
        watch(selectedArea, () => {
            initAreaMapChart();
        });

        // 返回所有在模板中使用的响应式数据和方法
        const initAlertLevelChart = () => {
            if (!alertLevelChart.value) return;

            const chart = echarts.init(alertLevelChart.value);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['严重告警', '高级告警', '一般告警']
                },
                series: [
                    {
                        name: '告警级别',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, name: '严重告警', itemStyle: { color: '#f56565' } },
                            { value: 20, name: '高级告警', itemStyle: { color: '#ed8936' } },
                            { value: 15, name: '一般告警', itemStyle: { color: '#ecc94b' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        };

        const initAlertTrendChart = () => {
            if (!alertTrendChart.value) return;

            const chart = echarts.init(alertTrendChart.value);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096',
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                series: [
                    {
                        name: '严重告警',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: [3, 2, 4, 5, 3, 2, 1]
                    },
                    {
                        name: '高级告警',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: {
                            color: '#ed8936'
                        },
                        data: [5, 4, 6, 3, 5, 4, 3]
                    },
                    {
                        name: '一般告警',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: [2, 3, 2, 4, 3, 2, 1]
                    }
                ]
            };
            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        };

        const initAreaComparisonChart = () => {
            if (!areaComparisonChart.value) return;

            const chart = echarts.init(areaComparisonChart.value);
            let option;

            // 根据选择的指标类型显示不同雷达图
            let radarIndicator = [];

            switch (selectedComparisonIndicator.value) {
                case 'temperature':
                    radarIndicator = [
                        { name: '高温区', max: 100 },
                        { name: '中温区', max: 100 },
                        { name: '低温区', max: 100 },
                        { name: '温度稳定性', max: 100 },
                        { name: '温度控制', max: 100 }
                    ];
                    break;
                case 'pressure':
                    radarIndicator = [
                        { name: '高压区', max: 100 },
                        { name: '中压区', max: 100 },
                        { name: '低压区', max: 100 },
                        { name: '压力稳定性', max: 100 },
                        { name: '压力控制', max: 100 }
                    ];
                    break;
                case 'flow':
                    radarIndicator = [
                        { name: '高流量', max: 100 },
                        { name: '中流量', max: 100 },
                        { name: '低流量', max: 100 },
                        { name: '流量稳定性', max: 100 },
                        { name: '流量控制', max: 100 }
                    ];
                    break;
                case 'concentration':
                    radarIndicator = [
                        { name: '高浓度', max: 100 },
                        { name: '中浓度', max: 100 },
                        { name: '低浓度', max: 100 },
                        { name: '浓度稳定性', max: 100 },
                        { name: '浓度控制', max: 100 }
                    ];
                    break;
                case 'vibration':
                    radarIndicator = [
                        { name: '高频振动', max: 100 },
                        { name: '中频振动', max: 100 },
                        { name: '低频振动', max: 100 },
                        { name: '振动稳定性', max: 100 },
                        { name: '振动控制', max: 100 }
                    ];
                    break;
                default:
                    radarIndicator = [
                        { name: '安全指数', max: 100 },
                        { name: '设备状态', max: 100 },
                        { name: '环保指标', max: 100 },
                        { name: '生产效率', max: 100 },
                        { name: '能耗水平', max: 100 }
                    ];
            }

            option = {
                animation: false,
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ['炼铁厂', '炼钢厂', '轧钢厂', '烧结厂', '动力厂'],
                    right: 10,
                    top: 0
                },
                radar: {
                    indicator: radarIndicator,
                    radius: '65%',
                    center: ['50%', '55%']
                },
                series: [
                    {
                        type: 'radar',
                        name: '区域指标对比',
                        data: [
                            {
                                value: [95, 90, 85, 88, 92],
                                name: '炼铁厂',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 2,
                                    color: '#f56565'
                                },
                                areaStyle: {
                                    color: 'rgba(245, 101, 101, 0.3)'
                                }
                            },
                            {
                                value: [88, 94, 90, 85, 86],
                                name: '炼钢厂',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 2,
                                    color: '#ed8936'
                                },
                                areaStyle: {
                                    color: 'rgba(237, 137, 54, 0.3)'
                                }
                            },
                            {
                                value: [86, 85, 92, 88, 90],
                                name: '轧钢厂',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 2,
                                    color: '#ecc94b'
                                },
                                areaStyle: {
                                    color: 'rgba(236, 201, 75, 0.3)'
                                }
                            },
                            {
                                value: [82, 80, 85, 90, 84],
                                name: '烧结厂',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 2,
                                    color: '#48bb78'
                                },
                                areaStyle: {
                                    color: 'rgba(72, 187, 120, 0.3)'
                                }
                            },
                            {
                                value: [90, 88, 85, 82, 95],
                                name: '动力厂',
                                symbol: 'circle',
                                symbolSize: 8,
                                lineStyle: {
                                    width: 2,
                                    color: '#4299e1'
                                },
                                areaStyle: {
                                    color: 'rgba(66, 153, 225, 0.3)'
                                }
                            }
                        ]
                    }
                ]
            };
            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        };

        // 刷新所有图表
        const refreshCharts = () => {
            nextTick(() => {
                initAreaMapChart();
                initAlertLevelChart();
                initAlertTrendChart();
                initAreaComparisonChart();
            });
        };

        // 窗口大小调整处理
        const handleResize = () => {
            const charts = [
                areaMapChart.value,
                alertLevelChart.value,
                alertTrendChart.value,
                areaComparisonChart.value
            ];

            charts.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
        };

        // 监听选中的对比指标变化
        watch(selectedComparisonIndicator, (newValue) => {
            // 在实际应用中，这里会根据选择的指标更新对比图表数据
            initAreaComparisonChart();
        });

        // 监听选中的区域变化
        watch(selectedArea, (newValue) => {
            // 在实际应用中，这里会根据选择的区域过滤数据
        });

        // 组件挂载
        onMounted(() => {
            refreshCharts();
            window.addEventListener('resize', handleResize);
        });

        // 组件卸载
        onUnmounted(() => {
            window.removeEventListener('resize', handleResize);

            // 清理所有图表实例
            const charts = [
                areaMapChart.value,
                alertLevelChart.value,
                alertTrendChart.value,
                areaComparisonChart.value
            ];

            charts.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.dispose();
                    }
                }
            });
        });

        // 返回所有在模板中使用的响应式数据和方法
        return {
            // 响应式数据
            userInfo,
            notificationCount,
            isGridView,
            isFullscreen,
            activeVideoIndex,
            mainMenus,
            areaOptions,
            selectedArea,
            mapViews,
            selectedMapView,
            legendCounts,
            timeRange,
            timeRangeOptions,
            showTimeRangeDropdown,
            selectTimeRange,
            totalAlerts,
            latestAlerts,
            realTimeIndicators,
            videoStreams,
            comparisonIndicatorOptions,
            selectedComparisonIndicator,
            isExporting,
            exportProgress,
            notifications,
            currentLegends,
            changeMapView,
            refreshData,

            // 弹窗相关数据
            showModal,
            modalType,
            modalTitle,
            trendPeriods,
            selectedTrendPeriod,
            trendFilterLevel,
            trendTableData,
            alertStatuses,
            selectedAlertStatus,
            alertSearchKeyword,
            currentPage,
            pageSize,
            allAlerts,
            filteredAlerts,
            totalFilteredAlerts,
            totalPages,

            // 图表引用
            areaMapChart,
            alertLevelChart,
            alertTrendChart,
            areaComparisonChart,
            detailedTrendChart,

            // 方法
            toggleMenu,
            selectSubmenu,
            selectArea,
            changeMapView,
            refreshData,
            exportReport,
            removeNotification,
            removeNotificationById,
            showNotification,
            toggleGridView,
            toggleFullscreen,
            activateVideo,

            // 弹窗相关方法
            openTrendDetails,
            openAllAlerts,
            closeModal,
            changeTrendPeriod,
            changeAlertStatus,
            updateTrendData,
            initDetailedTrendChart
        };
    }
};
</script>

<style scoped>
/* 自定义样式 */
.monitoring__chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义选择器样式 */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
}

/* 进度条样式 */
.progress-bar__custom {
    transition: width 0.3s ease;
}

/* 通知动画 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}
</style>